<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>马斐斯珠宝</title>

  <!-- 图标信息 -->
  <link rel="icon" href="../assets/images/kind_bg1.png" />
  <link rel="apple-touch-icon" href="../assets/images/kind_bg1.png" />
  <meta name="msapplication-TileImage" content="../assets/images/kind_bg1.png" />

  <!-- 引入bootstrap -->
  <link rel="stylesheet" href="../assets/css/bootstrap.min.css">

  <!-- 引入动画库 -->
  <link rel="stylesheet" href="../assets/css/animate.min.css">

  <!-- 引入重置样式文件 -->
  <link rel="stylesheet/less" href="../assets/css/reset.less">

  <!-- 引入公共样式common.less -->
  <link rel="stylesheet/less" href="../assets/css/common.less">

  <!-- 引入购物车样式cart.less -->
  <link rel="stylesheet/less" href="../assets/css/cart.less">
</head>

<body>

  <!-- header -->
  <header>
    <div class="icon">
      <img src="../assets/images/header.png" alt="">
    </div>
    <div class="search">
      <div class="box">
        <p><span class="glyphicon glyphicon-search"></span>搜索</p>
        <input type="text">
      </div>
    </div>
  </header>

  <!-- 我的购物车标题 -->
  <div class="cart_title">
    我的购物车
  </div>

  <!-- cart -->
  <div class="cart">
    <ul>
      <li>
        <div class="radio">
          <input type="checkbox" name="ct" id="c1" class="item">
          <label for="c1">
            <img src="../assets/images/false.png" alt="">
            <img src="../assets/images/true.png" alt="">
          </label>
        </div>
        <div class="img">
          <img src="../assets/images/cart.png" alt="">
        </div>
        <div class="info">
          <div class="goods_name">【模板】 18K 金鑽石戒指 1</div>
          <div class="goods_price">￥40.5</div>
          <label class="num">
            <button class="decrease">-</button>
            <span class="goods_name">1</span>
            <button class="increase">+</button>
          </label>
        </div>
        <div class="del">
          <img src="../assets/images/del.png" alt="">
          <p>移除</p>
        </div>
      </li>
      <li>
        <div class="radio">
          <input type="checkbox" name="ct" id="c2" class="item">
          <label for="c2">
            <img src="../assets/images/false.png" alt="">
            <img src="../assets/images/true.png" alt="">
          </label>
        </div>
        <div class="img">
          <img src="../assets/images/cart.png" alt="">
        </div>
        <div class="info">
          <div class="goods_name">【模板】 18K 金鑽石戒指 2</div>
          <div class="goods_price">￥40.5</div>
          <label class="num">
            <button class="decrease">-</button>
            <span>1</span>
            <button class="increase">+</button>
          </label>
        </div>
        <div class="del">
          <img src="../assets/images/del.png" alt="">
          <p>移除</p>
        </div>
      </li>
      <li>
        <div class="radio">
          <input type="checkbox" name="ct" id="c3" class="item">
          <label for="c3">
            <img src="../assets/images/false.png" alt="">
            <img src="../assets/images/true.png" alt="">
          </label>
        </div>
        <div class="img">
          <img src="../assets/images/cart.png" alt="">
        </div>
        <div class="info">
          <div class="goods_name">【模板】 18K 金鑽石戒指 3</div>
          <div class="goods_price">￥40.5</div>
          <label class="num">
            <button class="decrease">-</button>
            <span>1</span>
            <button class="increase">+</button>
          </label>
        </div>
        <div class="del">
          <img src="../assets/images/del.png" alt="">
          <p>移除</p>
        </div>
      </li>
    </ul>
  </div>

  <!-- cart_footer -->
  <div class="cart_footer">
    <div class="all_radio">
      <input type="checkbox" name="all_radio" id="all_radio">
      <label for="all_radio">
        <img src="../assets/images/false.png" alt="">
        <img src="../assets/images/true.png" alt="">
        <span>全选</span>
      </label>
    </div>
    <div class="info">
      <p>总价<span class="goods_sum">￥0</span></p>
      <p>(共 <span class="total">0</span> 件，不含运费)</p>
    </div>
    <div class="cart_btn">
      <button>去结算</button>
    </div>
  </div>


  <!-- footer -->
  <div class="footer">
    <ul>
      <li>
        <a href="../index.html">
          <img src="../assets/images/footer1.png" alt="">
          <img src="../assets/images/footer11.png" alt="">
          <p>首页</p>
        </a>
      </li>
      <li>
        <a href="../view/hlep.html">
          <img src="../assets/images/footer2.png" alt="">
          <img src="../assets/images/footer22.png" alt="">
          <p>帮购</p>
        </a>
      </li>
      <li>
        <a href="../view/cart.html">
          <img src="../assets/images/footer3.png" alt="">
          <img src="../assets/images/footer33.png" alt="">
          <p>购物车</p>
        </a>
      </li>
      <li>
        <a href="../view/center.html">
          <img src="../assets/images/footer4.png" alt="">
          <img src="../assets/images/footer44.png" alt="">
          <p>个人中心</p>
        </a>
      </li>
    </ul>
  </div>


  <!-- 引入jquery -->
  <script src="../assets/js/jQuery.min.js"></script>

  <!-- 引入bootstrap.js -->
  <script src="../assets/js/bootstrap.min.js"></script>

  <!-- 引入less解析js -->
  <script src="../assets/js/less.min.js"></script>

  <!-- 引入懒加载js -->
  <script src="../assets/js/wow.min.repeat.js"></script>

  <script>
    window.onload = function () {
      var allRadio = document.querySelector("#all_radio");
      var goodsSum = document.querySelector(".goods_sum");
      var radios = document.querySelectorAll(".item");
      var sum = 0;

      goodsSum.innerHTML = "￥" + sum;
      /* 全选按钮 */
      allRadio.addEventListener("click", function () {
        radios.forEach((items) => {
          items.checked = this.checked;
        })
        priceSum();
      })


      /* 单选按钮 */
      radios.forEach((items) => {
        items.addEventListener("click", function () {
          allRadio.checked = true;
          for (let i = 0; i < radios.length; i++) {
            if (!radios[i].checked) {
              allRadio.checked = false;
              break;
            }
          }

          priceSum();

        })
      })


      /* 删除按钮 */
      var del = document.querySelectorAll(".del");
      del.forEach((items) => {
        items.addEventListener("click", function () {
          var li = this.parentNode;
          var goodsName = this.parentNode.children[2].children[0].innerHTML;
          if (confirm("你确定要删除" + goodsName + "吗？")) {
            li.parentNode.removeChild(li);
          }
          priceSum();
        })
      })


      var decreaseBtn = document.querySelectorAll(".decrease");
      var increaseBth = document.querySelectorAll(".increase");

      /* 减少数量按钮 */
      decreaseBtn.forEach((items) => {
        items.addEventListener("click", function () {
          var num = parseInt(items.parentNode.children[1].innerHTML);
          if (num > 1) {
            num--;
          } else {
            this.disabled = false;
          }
          items.parentNode.children[1].innerHTML = num;
          console.log(num);

          priceSum();
        })
      })

      /* 增加数量按钮 */
      increaseBth.forEach((items) => {
        items.addEventListener("click", function () {
          var num = parseInt(items.parentNode.children[1].innerHTML);
          num++;
          items.parentNode.children[1].innerHTML = num;
          console.log(num);

          priceSum();
        })
      })

      function priceSum() {
        var sum = 0;
        var radios = document.querySelectorAll(".item");
        var totalsum = document.querySelector(".total");
        var total = 0;
        radios.forEach((items) => {
          var num = parseInt(items.parentNode.parentNode.children[2].children[2].children[1].innerHTML);
          var price;
          price = items.parentNode.parentNode.children[2].children[1].innerHTML;
          price = parseFloat(price.slice(1));
          if (items.checked) {
            sum += price * num;
            total += num;
          }
          goodsSum.innerHTML = "￥" + sum;
        })
        totalsum.innerHTML = total;
      }
    }
  </script>
</body>

</html>